<!--
 * @Author: DeluxePig 250293786@qq.com
 * @Date: 2024-06-05 23:17:14
 * @LastEditors: zhuhaohua 250293786@qq.com
 * @LastEditTime: 2024-06-26 09:40:33
 * @FilePath: \easy-talk\src\views\home\index.vue
 * @Description: 主页中间
-->
<template>
  <div class="user-middle-box">
    <div
      v-for="item in userList"
      :key="item.name"
      class="list-box"
      @click="runTo(item.url)"
    >
      <div class="user-img-box"></div>
      <div class="user-info-box">
        <div class="info name">{{ item.name }}</div>
        <div class="info phone">
          {{ item.value }}
          <span class="unit">{{ item.unit }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getBaseBacklogApi } from '@/api/user'
export default {
  name: 'HomeMiddle',
  data() {
    return {
      userList: [
        {
          name: '我的关注',
          value: '0',
          unit: '人',
          url: '/myfollow'
        },
        {
          name: '我的粉丝',
          value: '0',
          unit: '人',
          url: '/myfans'
        },
        {
          name: '历史访问',
          value: '0',
          unit: '人',
          url: '/visited-histroy'
        },
        {
          name: '消息中心',
          value: '0',
          unit: '人',
          url: '/news-center'
        }
      ]
    }
  },
  computed: {},
  created() {
    this.getBaseBacFun()
  },
  methods: {
    getBaseBacFun() {
      getBaseBacklogApi().then((res) => {
        const resData = res.data
        this.userList = [
          {
            name: '我的关注',
            value: resData.follow,
            unit: '人',
            url: '/myfollow'
          },
          {
            name: '我的粉丝',
            value: resData.fans,
            unit: '人',
            url: '/myfans'
          },
          {
            name: '历史访问',
            value: resData.card_visit,
            unit: '人',
            url: '/visited-histroy'
          },
          {
            name: '消息中心',
            value: resData.unread,
            unit: '人',
            url: '/news-center'
          }
        ]
      })
    },
    runTo(url) {
      this.$router.push({ path: url })
    }
  }
}
</script>

<style lang="scss" scoped>
.user-middle-box {
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  padding: 20px 28px;
  justify-content: space-around;
  align-items: center;

  .list-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: calc(25% - 20px);
    height: 94px;
    position: relative;
    background: #f4f5f9;
    border-radius: 8px;
    padding: 20px;
    cursor: pointer;

    .user-img-box {
      width: 50px;
      height: 50px;
      overflow: hidden;
      background: url('~@/assets/images/home-icon.png') no-repeat;
      background-size: 100% 100%;
    }

    .user-info-box {
      height: 76px;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      flex-direction: column;
      padding-left: 12px;
      font-size: 14px;
      color: #9e9e9e;

      .info {
        line-height: 26px;
      }

      .name {
        font-weight: 600;
        font-size: 20px;
        color: #1c1f23;
      }

      .hospital {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #6a6b6c;
        line-height: 16px;
        text-align: left;

        .hospital-level {
          display: inline-block;
          background: rgba(4, 209, 184, 0.1);
          border-radius: 4px 4px 4px 4px;
          padding: 2px 4px;
          margin-right: 8px;
          font-size: 14px;
          color: #08bda7;

          .iconfont {
            font-size: 12px;
            vertical-align: top;
            margin-right: 2px;
          }
        }
      }
    }
  }

  .list-box:hover {
    border: 1px solid #eee;
    background: #cfd3e6;
  }
}
</style>
